<template>
	<view>
		<u-loading-page :loading="loadingData"></u-loading-page>
		<u-modal :closeOnClickOverlay="true" :show="showFeedback" @close="closeFeedback" @confirm="addFeedback"
			title="添加意见反馈" confirmText="保存">
			<u--form labelPosition="left" :model="feedback" ref="formFeedback" :errorType="errorType">
				<u-form-item prop="feedbackTitle" borderBottom ref="feedbackTitle" labelWidth="70">
					<u--input v-model="feedback.feedbackTitle" border="none" prefixIcon="file-text-fill"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入标题"></u--input>
				</u-form-item>

				<u-form-item prop="feedbackDetails" borderBottom ref="feedbackDetails" labelWidth="70">
					<u--textarea v-model="feedback.feedbackDetails" placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</u--form>
		</u-modal>
		<u-navbar title="意见反馈列表" leftText="返回" @rightClick="showaddFeedback" :autoBack="true" bgColor="#98c39a"
			rightIcon="plus-circle">
		</u-navbar>
		<view class="mydcontent">
			<u-list>
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<!-- <u-cell :title="item.feedbackTitle" :label="item.userId" :value="item.feedbackDetails">
					</u-cell> -->
					<view class="item" @click="loadMore(item.feedbackTitle,item.feedbackDetails)">
						<view class="top">
							<view class="img">
								<img src="/static/1.jpg" alt="">
							</view>
							<view class="title">
								{{item.feedbackTitle}}
							</view>
						</view>
						<view class="content">
							{{item.feedbackDetails}}
						</view>
					</view>
					<u-divider color="#aa55ff"></u-divider>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedback: {},
				errorType: 'border-bottom',
				showFeedback: false,
				loadingData: false,
				indexList: [],
				// urls: [
				// 	'https://cdn.uviewui.com/uview/album/1.jpg',
				// 	'https://cdn.uviewui.com/uview/album/2.jpg',
				// 	'https://cdn.uviewui.com/uview/album/3.jpg',
				// 	'https://cdn.uviewui.com/uview/album/4.jpg',
				// 	'https://cdn.uviewui.com/uview/album/5.jpg',
				// 	'https://cdn.uviewui.com/uview/album/6.jpg',
				// 	'https://cdn.uviewui.com/uview/album/7.jpg',
				// 	'https://cdn.uviewui.com/uview/album/8.jpg',
				// 	'https://cdn.uviewui.com/uview/album/9.jpg',
				// 	'https://cdn.uviewui.com/uview/album/10.jpg',
				// ]
			}
		},
		onLoad() {
			this.getFeedbackData()
		},
		methods: {
			loadMore(title, content) {
				console.log('title', title)
				this.feedback.feedbackTitle = title
				this.feedback.feedbackDetails = content
				uni.navigateTo({
					url: '/pages/feedbackdetail/feedbackdetail?title=' + this.feedback.feedbackTitle +
						'&content=' + this.feedback.feedbackDetails
				})
			},
			addFeedback() {
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/management/api/addUserRecharge',
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: this.feedback,
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								uni.$u.toast('添加成功')
								this.closeFeedback() //再调一次
								this.getFeedbackData() //再调一次接口，看到最新数据
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			editUserInfo() {
				this.indexList.push({
					url: this.indexList[{
						title: '顶顶顶顶',
						value: '顶顶顶'
					}]
				})
			},
			closeFeedback() {
				this.showFeedback = false
			},
			showaddFeedback() {
				this.showFeedback = true
			},
			// scrolltolower() {
			// 	this.loadmore()
			// },
			// loadmore() {
			// 	for (let i = 0; i < 30; i++) {
			// 		this.indexList.push({
			// 			url: this.urls[uni.$u.random(0, this.urls.length - 1)]
			// 		})
			// 	}
			// }

			getFeedbackData() {
				this.loadingData = true
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/management/Apilist',
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.indexList = res.data.rows
								this.loadingData = false
								this.closeFeedback()
								// uni.$u.toast(res.data)

							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});

			},

		},
	}
</script>

<style lang="scss">
	.mydcontent {
	margin-top: 43px;
	// background-color: #f5f5f5;
		.item {
			.top {
				margin: 10px;
				display: flex;
				flex-direction: row;

				.img {
					width: 30px;
					height: 30px;

					img {
						width: 30px;
						height: 30px;
					}
				}

				.title {
					margin-left: 15px;
					width:100%;
					overflow:hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.content {
				margin: 10px;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
